<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div>
    <p>hello world</p>
    <div id="shadow"></div>
  </div>

  <script>
    const shadowDOM = shadow.attachShadow({mode: 'open'}); // 外界无法访问 shadow dom
    const pElm = document.createElement('p');
    pElm.innerHTML = 'hello ahhh';
    const styleElm = document.createElement('style');
    styleElm.textContent = `
      p{color:red}
    `;
    shadowDOM.appendChild(styleElm);
    shadowDOM.appendChild(pElm);

    // document.appendChild(pElm); //todo 但如果把子项直接挂到父项里 样式就作用不到了；比如 react、vue里的弹框组件 是直接挂载到body上的, 这样的话就会出现问题 (这种情况最好用css-in-js)
  </script>
</body>
</html>
